<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
  <link rel="stylesheet" href="../plugins/slick.headermenu.css" type="text/css"/>
  <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
  <style>
    /**
     * Style the drop-down menu here since the plugin stylesheet mostly contains structural CSS.
     */

    .slick-header-menu {
      border: 1px solid #718BB7;
      background: #f0f0f0;
      padding: 2px;
      -moz-box-shadow: 2px 2px 2px silver;
      -webkit-box-shadow: 2px 2px 2px silver;
      z-index: 20;
    }


    .slick-header-menuitem {
      padding: 2px 4px;
      border: 1px solid transparent;
      border-radius: 3px;
    }

    .slick-header-menuitem:hover {
      border-color: silver;
      background: white;
    }

    .slick-header-menuitem-disabled {
      border-color: transparent !important;
      background: inherit !important;
    }

    .icon-help {
      background-image: url(../images/help.png);
    }
  </style>
</head>
<body>
<div style="position:relative">
  <div style="width:500px;">
    <div id="myGrid" style="width:100%;height:500px;"></div>
  </div>

  <div class="options-panel">
      <h2>Demonstrates:</h2>
      <p>
        This example demonstrates using the <b>Slick.Plugins.HeaderMenu</b> plugin to add drop-down menus to column
        headers.  (Hover over the headers.)
      </p>
      <hr>
      <h3>Auto-align option</h3>
      <p>
        Auto-align (defaults to True), will calculate whether it has enough space to show the drop menu to the right.
        If it calculates that the drop menu is to fall outside of the viewport, it will automatically align the drop menu to the left.
      </p>
      <hr>
      <h3>Auto-Align Header Menu Drop</h3>
      <button onclick="autoAlignMenu(true)">ON</button>
      <button onclick="autoAlignMenu(false)">OFF</button>
      <h2>View Source:</h2>
      <ul>
          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-plugin-headermenu.html" target="_sourcewindow"> View the source for this example on Github</a></li>
      </ul>
  </div>
</div>

<script src="../lib/jquery-1.11.2.min.js"></script>
<script src="../lib/jquery.event.drag-2.3.0.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>
<script src="../plugins/slick.headermenu.js"></script>
<script src="../controls/slick.columnpicker.js"></script>

<script>
  var data = [];
  var grid;
  var headerMenuPlugin;
  var columns = [
    {id: "title", name: "Title", field: "title", width: 90},
    {id: "duration", name: "Duration", field: "duration", sortable: true, width: 90},
    {id: "%", name: "% Complete", field: "percentComplete", sortable: true, width: 90},
    {id: "start", name: "Start", field: "start", sortable: true},
    {id: "finish", name: "Finish", field: "finish", sortable: true},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}

  ];

  for (var i = 0; i < columns.length; i++) {
    columns[i].header = {
      menu: {
        items: [
          {
            iconImage: "../images/sort-asc.gif",
            title: "Sort Ascending",
            disabled: !columns[i].sortable,
            command: "sort-asc"
          },
          {
            iconImage: "../images/sort-desc.gif",
            title: "Sort Descending",
            disabled: !columns[i].sortable,
            command: "sort-desc"
          },
          {
            title: "Hide Column",
            command: "hide",
            tooltip: "Can't hide this column"
          },
          {
            divider: true,
            command: ""
          },
          {
            iconCssClass: "icon-help",
            title: "Help",
            command: "help"
          }
        ]
      }
    };
  }

  // keep a copy of all column for the array of visible columns
  var visibleColumns = columns;

  var options = {
    columnPicker: {
      columnTitle: "Columns"
    },
    enableColumnReorder: false,
    multiColumnSort: true
  };

  var executeSort = function(sortCols) {
    // firstly add column reference and remove any sort columns that are no longer visible
    sortCols = sortCols.filter(function (el, i) {
      for (var i=0; i<visibleColumns.length; i++) {
        if (visibleColumns[i].id === el.columnId) {
          el.sortCol = visibleColumns[i];
          return true;
        }
      }
      return false;
    });
    grid.setSortColumns(sortCols);

    data.sort(function (dataRow1, dataRow2) {
        for (var i = 0, l = sortCols.length; i < l; i++) {
          var field = sortCols[i].sortCol.field;
          var sign = sortCols[i].sortAsc ? 1 : -1;
          var value1 = dataRow1[field], value2 = dataRow2[field];
          var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
          if (result != 0) {
            return result;
          }
        }
        return 0;
      });
      grid.invalidate();
      grid.render();
  };

  var removeColumnById = function(array, idVal) {
    return array.filter(function (el, i) {
      return el.id !== idVal;
    });
  };

  var removeSortColumnById = function(array, idVal) {
    return array.filter(function (el, i) {
      return el.columnId !== idVal;
    });
  };

  function autoAlignMenu(isEnabled) {
    headerMenuPlugin.setOptions({ autoAlign: isEnabled });
  }

  function formattedRandomNum(maxVal) {
    var numDigits = ('' + maxVal).length;
    return ('0000' + (Math.floor(Math.random() * maxVal) + 1)).slice(-numDigits) 
  }

  
  
  $(function () {
    data = [];
    for (var i = 0; i < 500; i++) {
      data[i] = {
        title: "Task " + i,
        duration: Math.floor(Math.random() * 25) + " days",
        percentComplete: Math.floor(Math.random() * 100),
        start: "" + formattedRandomNum(28) + "/03/2009",
        finish: "" + formattedRandomNum(28) + "/05/2011",
        effortDriven: (i % 5 == 0)
      };
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
    var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
    headerMenuPlugin = new Slick.Plugins.HeaderMenu({});

    grid.onSort.subscribe(function (e, args) {
      executeSort(args.sortCols);
    });

    headerMenuPlugin.onCommand.subscribe(function(e, args) {
      if(args.command === "hide") {
        // hide column
        visibleColumns = removeColumnById(visibleColumns, args.column.id);
        grid.setColumns(visibleColumns);
        executeSort(grid.getSortColumns());
      }else if(args.command === "sort-asc" || args.command === "sort-desc") {
        // sort column asc or desc
        var isSortedAsc = (args.command === "sort-asc");

        var sortCols = removeSortColumnById(grid.getSortColumns(), args.column.id);
        sortCols.push({ sortAsc: isSortedAsc, columnId: args.column.id });

        grid.setSortColumns(sortCols);
        executeSort(sortCols);
      }else {
        // command not recognised
        alert("Command: " + args.command);
      }
    });

    grid.registerPlugin(headerMenuPlugin);

  })
</script>
</body>
</html>
